<template>
  <div>
    <el-button type="primary" plain size="mini" @click="planSelect(item.id)"
      >数据清单</el-button
    >
    <el-dialog
      width="80%"
      
      title="数据清单"
      :visible.sync="outerVisible"
    >
      <el-card>
        <div slot="header" class="clearfix">
          <span>图斑数据</span>
          <el-button
            size="medium"
            type="primary"
            style="float: right"
            @click="auditMore()"
            >批量审核</el-button
          >
        </div>
        <el-table
          :data="tableData"
          border
          style="width: 100%; margin: 15px 0"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            prop="id"
            type="selection"
            width="55"
          ></el-table-column>

          <el-table-column fixed prop="landCode" label="图斑ID" width="100">
            <template slot-scope="tableData">
              {{ tableData.row.landId }}
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="planName"
            width="150"
            label="所在任务"
          >
          </el-table-column>

          <el-table-column prop="landName" label="地塘块命名" width="150">
            <template slot-scope="tableData">
              {{ tableData.row.landName }}
            </template>
          </el-table-column>
          <el-table-column prop="landTownName" label="镇街" width="100">
            <template slot-scope="tableData">
              {{ tableData.row.landTownName }}
            </template>
          </el-table-column>
          <el-table-column prop="landVillageName" label="村居" width="100">
            <template slot-scope="tableData">
              {{ tableData.row.landVillageName }}
            </template>
          </el-table-column>
          <el-table-column prop="landProductArea" label="面积(亩)" width="100">
          </el-table-column>

          <!-- <el-table-column prop="belongsBody" label="所属主体"> </el-table-column> -->
          <el-table-column
            align="center"
            width="80"
            prop="gather"
            label="采集状态"
          >
            <template slot-scope="scope">{{
              scope.row.collectStatus == "2" ? "已经采集" : "未采集"
            }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            width="100"
            prop="auditStatus"
            label="审核状态"
          >
            <template slot-scope="scope">
              {{ auditStatusCn(scope.row.auditStatus) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="auditPerson"
            label="审核人"
            width="150"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="auditDate"
            label="审核时间"
            width="250"
          >
          </el-table-column>

          <el-table-column label="操作" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="checkAudit(scope.row)"
                >审核</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="bottom" style="margin: 15px 0; float: right">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="currentchange"
            :current-page="paging.pageNum"
            :page-sizes="[5, 10, 20, 30, 40]"
            :page-size="paging.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
      </el-card>

      <el-dialog
        title="图斑地块审核"
        :visible.sync="dialogStatus"
        :close-on-click-modal="false"
        width="40%"
        :destroy-on-close="true"
        :append-to-body="true"
      >
        <el-form
          :model="modelData"
          status-icon
          ref="modelData"
          :inline="false"
          size="normal"
          label-width="90px"
          label-position="right"
        >
          <el-row>
            <el-col :span="24">
              <el-card>
                <el-form-item label="图斑ID" prop="landId">
                  <el-input
                    type="text"
                    :disabled="true"
                    v-model="modelData.landId"
                  >
                  </el-input>
                </el-form-item>

                <el-form-item label="地块名" prop="landName">
                  <el-input
                    type="text"
                    :disabled="true"
                    v-model="modelData.landName"
                  >
                  </el-input>
                </el-form-item>

                <el-form-item label="面积(亩)" prop="landProductArea">
                  <el-input
                    type="text"
                    :disabled="true"
                    v-model="modelData.landProductArea"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="镇街" prop="landTownName">
                  <el-input
                    type="text"
                    :disabled="true"
                    v-model="modelData.landTownName"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="村居" prop="landVillageName">
                  <el-input
                    type="text"
                    :disabled="true"
                    v-model="modelData.landVillageName"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="审核状态" prop="name">
                  <!-- <el-input v-model="modelData.auditStatus"> </el-input> -->
                  <template>
                    <el-radio v-model="modelData.auditStatus" :label="2"
                      >通过</el-radio
                    >
                    <el-radio v-model="modelData.auditStatus" :label="3"
                      >不通过</el-radio
                    >
                  </template>
                </el-form-item>
                <el-form-item label="审核描述" prop="name">
                  <el-input type="textarea" v-model="modelData.auditMemo">
                  </el-input>
                </el-form-item>
              </el-card>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="mini" @click="onSubmit()"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
  },
  data() {
    return {
      outerVisible: false,
      form: {
        week: "",
      },
      multipleSelection: [],
      tableData: [],
      search: {
        planName: "",
        value: "",
      },
      searchData: {
        pageNumber: 1,
        pageSize: 5,
        landTownCode: "",
      },
      params: {
        pageNumber: 1,
        pageSize: 10,
      },
      paging: {},
      List: [],
      options: [],
      townIndex: 0,
      dialogStatus: false,
      modelData: {},
      plans: [],
    };
  },
  created() {
    this.selectData();
    // this.planData();
  },
  methods: {
    planSelect(val) {
      this.$axios
        .get("rbac/data/CollectTaskLand/list", {
          params: {
            "collectTaskLand.planId": val,
          },
        })
        .then((res) => {
          this.tableData = res.data.list;
          this.paging = res.data;
          this.outerVisible = true;
        });
    },
    auditStatusCn(index) {
      var Status = {
        0: "初始状态",
        1: "待审核",
        2: "审核通过",
        3: "审核失败",
      };

      return Status[index];
    },
    planData() {
      // 
      this.$axios
        .get("task/task/queryPlanAccordingToTheTask", {
          params: {
            pageNumber: 1,
            pageSize: 100,
          },
        })
        .then((res) => {
          this.plans = res.data.list;
        });
    },
    selectData() {
      var json = JSON.parse(
        window.localStorage.getItem("getTreeData/setAsyncVillageData")
      );
      this.options = json[0].children[0].children;
    },
    statusChange(item) {
      console.log(item);
    },
    onSearch() {},
    handleSizeChange(pageSize) {
      this.params["collectTaskLand.planId"] = this.item.id;
      this.params.pageSize = pageSize;
      console.log(this.params, 1);
      this.list();
    },
    currentchange(pageNumber) {
      this.params["collectTaskLand.planId"] = this.item.id;
      this.params.pageNumber = pageNumber;
      console.log(this.params, 2);
      this.list();
    },

    list() {
      this.$axios
        .get("rbac/data/CollectTaskLand/list", {
          params: this.params,
        })
        .then((res) => {
          this.tableData = res.data.list;
          this.paging = res.data;
        });
    },
    searchInfo() {
      this.$axios
        .get("rbac/data/LandInfo/getList", {
          params: {
            "landInfo.landCode": this.searchData.landCode,
            "landInfo.landName": this.searchData.landName,
            "landInfo.landTownCode": this.searchData.landTownCode,
            "landInfo.landVillageCode": this.searchData.landVillageCode,
            "landSubject.lsSubjectCode": this.searchData.lsSubjectCode,
            "landInfo.landProduct": this.searchData.landProduct,
            subjectName: this.searchData.subjectName,
            "landInfo.auditStatus": -1,
          },
        })
        .then((res) => {
          this.tableData = res.data.list;
          this.paging = res.data;
        });
    },
    onSubmit() {
      this.dialogStatus = false;
      this.$confirm("是否确认操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //发送审核请求
          this.$axios
            .post("rbac/LandSubject/auditLand", {
              params: {
                landIds: this.modelData.id,
                auditStatus: this.modelData.auditStatus,
                auditMemo: this.modelData.auditMemo,
              },
            })
            .then((result) => {
              //   this.list();
              this.$message.success("操作完成");
            });
        })
        .catch(() => {});
    },

    checkAudit(row) {
      console.log(row);
      this.modelData = row;
      this.dialogStatus = true;
    },

    auditMore() {
      var val = this.selectedData;
      if (val) {
        this.$confirm("是否批量通过审核?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            var arr = [];
            val.forEach(function (item, index) {
              console.log(item.id);
              arr.push(item.id);
            });

            this.$axios
              .post("rbac/LandSubject/auditLand", {
                params: {
                  landIds: arr.join(","),
                  auditStatus: 2,
                },
              })
              .then((result) => {
                  console.log(result)
                this.list();
                this.$message.success("审核完成");
              });
          })
          .catch(() => {});
      } else {
        this.$alert("请至少选中一条记录", "审核选择", {
        confirmButtonText: "确定",
        // callback: (action) => {
        //   this.$message({
        //     type: "message",
        //     message: `action: ${action}`,
        //   });
        // },
      });


      }
    },
    openn() {
      this.$alert("这是一段内容", "标题名称", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
        },
      });
    },
    handleSelectionChange(val) {
      this.selectedData = val;
    },
  },
};
</script>

<style lang="scss">
.checkdata {
  background: #fff;
  padding: 15px;

  .ReviewButton {
    margin: 10px 0;
  }

  .cell {
    display: flex;
    justify-content: space-around;

    .el-button {
      margin: 0 5px;
    }
  }

  .subject {
    display: flex;
  }
}

.sh {
  p {
    line-height: 35px;
  }
}
</style>
